<template>
	<div class="">
		<!--发布编排历史-->
		
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
			
			<listTpml 
				:data="pageData"
				ref="listTpml"
				@onCommand="listCommand"
				></listTpml>
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
	import listTpml from "@/view/components/listTmpl";
	
	import {getOrchestrateInstHistory,getOrchestrateHistoryStatus,deleteOrchestrateInstHistory} from "@/service/swagger/OrchestrateController";
	import {bianpaiStatusFilter} from "@/filters/status/index";
	import {listenner} from "@/utils/statuslistener" ;
	
	export default {
		components : {
			listTpml,
		},
		data(){
			return {
				pageData : {
					pageTitle : "编排历史",
					
					// 列表table 设置
					filterOption : [
						{
							label : "发布名称", // label名
							paramsName : "name", // 出参name值
							defaultValue : "", // 出参默认值
							componentsName : "nameInput", // 
						},
						{
							label : "模板选择", // label名
							paramsName : "serviceTemplateId", // 出参name值
							defaultValue : this.$route.query.serviceTemplateId || "", // 出参默认值
							componentsName : "bianpaiMobanSelect", // 
						},
					],
					
					listOption : {
						
						// 列表api
						listApi : {
							serviceFN : getOrchestrateInstHistory ,
						},
						// 表头设置
						header : [{
							label : "发布名称" ,
							propName : "name",
							align:"left",
						},
						{
							label : "编排名称" ,
							propName : "templateName",
							commandName : "goBPDetail",
						},
						{
							label : "状态" ,
							//propName : "status",
							html:(row)=>{
								return bianpaiStatusFilter(row.status,{
									abnormal : row.abnormal ,
									giveUp : row.giveUp ,
									normal : row.normal ,
									total : row.total ,
								});
							}
						},
						{
							label : "应用模板数" ,
							propName : "total",
						},
//						{
//							label : "正常实例数" ,
//							propName : "normal",
//						},
//						{
//							label : "异常实例数" ,
//							propName : "abnormal",
//						},
//						{
//							label : "未部署实例数" ,
//							propName : "giveUp",
//						},
						{
							label : "操作" ,
							width : "",
							btns : [{
								label : "详情",
								commandName : "goDetail",
							},
							{
								label : "删除",
								commandName : "deleteOrchestrate",
							},],
							btnGroups : []
						}]
						
					}
				}
			}
		},
		mounted(){
			//this.refresh();
		},
		methods:{
			listCommand(command, row, index) {
				// console.log("列表进行了操作：", command,row,index );
				if (command && this[command]) {
					this[command](row, index);
				}
			},
			
			refresh(){
				this.$refs.listTpml.search();
			},
			 
			goDetail(row,index){
				this.$router.push({
					path:"/bp/edit",
					query:{
						id : row.serviceTemplateId,
						instId : row.serviceInstId,
						isHistory: 1 
					},
				})
			},
			
			goBPDetail(row,index){
				this.$router.push({
					path:"/bp/edit",
					query:{
						id : row.serviceTemplateId,
						// instId : row.serviceInstId,
						// isHistory: 1 
					},
				})
			},
			
			listLoaded(tableData) {
				const statusStatic = (status) => {
					// 是否是稳定状态
					const isStatic = !(bianpaiStatusFilter(status).indexOf("...") > -1);
					return isStatic;
				}
				
				let unStaticArr = [];
				// 添加  status 监听
				tableData.forEach(el => {
					if (!statusStatic(el.status)) {
						unStaticArr.push(el.serviceInstId)
					}
				});
				if (unStaticArr && unStaticArr.length) {
					listenner({
						api: {
							serviceFN: getOrchestrateHistoryStatus,
							params: unStaticArr,
						},
						callBack: (ret) => {
	
							let hasAllStatusStaticed = true;
							ret.data.forEach(data => {
								if (!statusStatic(data.status)) {
									hasAllStatusStaticed = false;
								}
								tableData.forEach(el => {
									if (data.serviceInstId == el.serviceInstId) {
										el.status = data.status;
										el.abnormal = data.abnormal;
										el.giveUp = data.giveUp;
										el.normal = data.normal;
										el.total = data.total;
									}
								});
							});
							this.$refs.listTpml.loadTableData(tableData)
							return hasAllStatusStaticed;
						},
					}, this)
				}
			},
			
			deleteOrchestrate(row,index){
				
				this.$confirm(`此操作将永久删除编排历史${row.name},是否继续?`, "删除编排历史", {
	        confirmButtonText: "确定",
	        cancelButtonText: "取消",
	        type: "warning"
	      }).then(() => {
	        deleteOrchestrateInstHistory({
						id : row.serviceInstId,
					}).then(ret=>{
						if(!ret.code){
							this.refresh();
						}
					})
	      });
				
			}
			
		}
	}
</script>

<style>
	
</style>